<template>
    <div id="st_login">
        <div id="formBox">
            <header>
                <section>立即登录</section>|
                <section>手机号登录</section>
            </header>

            <el-form class="loginForm" :model="loginForm" status-icon ref="ruleForm">
                <el-form-item class="input_item" label="账号" prop="accound">
                    <el-input type="text" v-model="loginForm.accound" autocomplete="on"></el-input>
                </el-form-item>
                <el-form-item class="input_item" label="密码" prop="pwd">
                    <el-input type="password" v-model="loginForm.pwd" autocomplete="on"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="medium" @click="loginIn">立即登录</el-button>
                    <div class="other_job">
                        <span>没有账号？<router-link to="/register">立即注册</router-link></span>
                        <span>忘记密码？</span>
                    </div>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
// 导入登录接口
import { login } from '@/utils/api'
export default {
    name: 'st_login',
    data() { 
        return {
            loginForm: {
                accound: '',
                pwd: ''
            }
        }
    },
    created() {

    },
    methods:{
        loginIn() {
            login(this.loginForm).then(res => {
                // console.log(res)
                this.$store.commit('saveToken', res.token)
                this.$message({
                    message: '登录成功',
                    type: 'success'
                })
                this.$router.push('/')
            }) 
        }
    }
}
</script>

<style lang="scss" scoped>
#st_login{
    width: 100%;
    height: 100%;
    background-image: url('../../assets/imgs/back.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
#formBox {
    width: 500px;
    background-color: #fff;
    padding: 30px;
    margin-right: 200px;
    border-radius: 20px;
    header{
        height: 70px;
        display: flex;
        width: 80%;
        margin: 0 auto;
        section {
            flex-basis: 50%;
            text-align: center;
            cursor: pointer;
        }
    }
    .loginForm{
        flex-basis: 100%;
        height: 300px;
        .input_item{
            margin-top: 40px;
        }
        // text-align: center;
        button{
            width: 100%;
            text-align: center;
            margin-top: 60px;
        }
        /deep/ .el-form-item__content {
            margin-left: 40px !important;
        }

        /deep/ .el-form-item__label{
            width: 40px !important;
        }
    }
}
.other_job{
    display: flex;
    justify-content: space-between;
    color: #ccc;
    span {
        cursor: pointer;
    }
}
</style>